<template>
	<view class="wrap">
		<view class="wrap__header">
			<text class="header__title">IPO</text>
			<image src="@/static/icons/history.png"  class="header__icon" @click="navTo"></image>
		</view>
		<view class="wrap__nav">
			<view :class="['nav__item', areaIndex===index?'nav__item--active':'']" v-for="(item, index) in areaList" 
			:key="index" @click="areaClick(index)">
				<text class="item__title">{{item.name}}</text>
				<text class="item__line"></text>
			</view>
		</view>
		<view class="wrap__cate">
			<view :class="['cate__item', cateIndex===index?'nav__item--active':'']" v-for="(item, index) in cateList" 
			:key="index" @click="cateClick(index)">
				<text class="item__title">{{item.title}}</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="wrap__main">
			<!-- 可申購列表 -->
			<view class="main__list" v-if="cateIndex===0">
				<buyItem v-for="(item, index) in canBuyList" :itemInfo="item" :key="index"></buyItem>
			</view>
			<!-- 待上市 已上市-->
			<listed v-else :ipoMarkList="ipoMarkList"></listed>
		</scroll-view>
	</view>
</template>
<script>
	import buyItem from '@/components/ipo/buyItem.vue'
	import listed from '@/components/ipo/listed.vue'
	export default{
		components:{
			buyItem,
			listed
		},
		data(){
			return {
				//  	"ipo.sub":"subscribe","ipo.listed":"listed","ipo.pending":"pending"
				areaList:[], //市場地区列表
				areaIndex:0, //市場地区索引
				cateList:[ //IPO分类列表
					{title:this.$t('ipo.sub'),type:"3"},
					{title:this.$t('ipo.pending'), type:"2"},
					{title:this.$t('ipo.listed'), type:"1"},
					],
				cateIndex:0, // 分類選中索引
				canBuyList:[], //可購買列表
				ipoMarkList:[], //ipo列表數據
			}
		},
		onShow() {
			// 是否登录
			let token = uni.getStorageSync("token")
			if(!token){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}else{
				// 获取页面数据
				this.getData()
			}
		},
		methods:{
			// 获取页面数据
			async getData(){
				// 地区分类
				await this.getAreaCate()
				//獲取ipo列表
				this.getIPOList()
			},
			//獲取ipo列表
			async getIPOList(){
				let {type} = this.cateList[this.cateIndex]
				let {id} = this.areaList[this.areaIndex]
				let res = await this.$api.getIPOList(id, type)
				if(res.code === 1 && res.data){
					if(this.cateIndex === 0){
						this.canBuyList = res.data.data || []
					}else{
						this.ipoMarkList = res.data.data || []
					}
				}
			},
			// 獲取地区分類
			async getAreaCate(){
				let res = await this.$api.getAreaCate()
				if(res.code === 1 && res.data){
					this.areaList = res.data
				}
			},
			// 導航切換
			areaClick(index){
				if(this.areaIndex !== index){
					this.areaIndex = index
					// 獲取ipo列表
					this.getIPOList()
				}
			},
			// 分類切換
			cateClick(index){
				if(this.cateIndex !== index){
					this.cateIndex = index
					// 獲取ipo列表
					this.getIPOList()
				}
			},
			// 菜单点击
			menuClick(item){
				let {url} = item
				uni.navigateTo({
					url
				})
			},
			// 跳轉
			navTo(){
				uni.navigateTo({
					url:"/pages/ipo/applyRecords"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		min-height: 100vh;
		padding: 0 30rpx;
		padding-top: 50rpx;
		box-sizing: border-box;
		&__header{
			@include flexRowAlign(space-between);
			.header__title{
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
			}
			.header__icon{
				width: 42rpx;
				height: 42rpx;
			}
		}
		&__nav{
			margin-top: 30rpx;
			@include flexRowAlign();
			.nav__item{
				height: 88rpx;
				@include flexCenter(column);
				margin-right: 94rpx;
				.item__title{
					font-size: 32rpx;
					font-weight: bold;
					color:#fff;
				}
				.item__line{
					width: 30rpx;
					height: 4rpx;
					background: transparent;
					border-radius: 2rpx;
					margin-top: 10rpx;
				}
			}
			.nav__item--active{
				.item__title{
					color: #458EF4;
				}
				.item__line{
					background: #458EF4;
				}
			}
		}
		&__cate{
			margin-top: 20rpx;
			@include flexRowAlign();
			.cate__item{
				margin-right: 18rpx;
				.item__title{
					width: 218rpx;
					height: 80rpx;
					background: #282c41;
					border-radius: 16rpx;
					@include flexCenter();
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
					border: 2px solid transparent;
					box-sizing: border-box;
				}
			}
			.nav__item--active{
				.item__title{
					border: 2px solid #458EF4;
					color: #458EF4;
				}
			}
		}
		&__main{
			margin-top: 30rpx;
			.main__list{
				
			}
		}
	}
</style>